<template>
  <div class="container max-w-6xl p-4 bg-white bg-opacity-60 my-4 rounded-lg backdrop-blur-md">
    <div class="flex space-x-4 my-4">
      <!-- 资讯分类 -->
      <span class="p-float-label">
        <CascadeSelect
          v-model="daid"
          :options="articleType"
          option-group-label="value"
          option-label="value"
          option-value="did"
          :optionGroupChildren="['children']"
          :class="{ 'p-invalid': commit && !daid }"
        />
        <label>选择资讯分类</label>
      </span>

      <!-- 资讯来源 -->
      <span class="p-float-label">
        <Dropdown
          v-model="data.source"
          :options="['原创', '转载']"
          :class="{ 'p-invalid': commit && !daid }"
        />
        <label>选择资讯来源</label>
      </span>

      <!-- 资讯标题 -->
      <span class="p-float-label flex-grow flex">
        <InputText class="w-full" v-model="data.title" />
        <label>资讯标题</label>
      </span>
    </div>

    <Editor ref="editor" v-model="data.content" editorStyle="height: 320px">
      <template #toolbar>
        <span class="ql-formats">
          <select class="ql-header" defaultValue="0">
            <option value="1">大标题</option>
            <option value="2">小标题</option>
            <option value="0">正文</option>
          </select>
          <select class="ql-font">
            <option></option>
            <option value="serif"></option>
            <option value="monospace"></option>
          </select>
        </span>
        <span class="ql-formats">
          <button class="ql-bold" type="button" v-tooltip.bottom="'加粗'"></button>
          <button class="ql-italic" type="button" v-tooltip.bottom="'斜体'"></button>
          <button class="ql-underline" type="button" v-tooltip.bottom="'下划线'"></button>
        </span>
        <span class="ql-formats">
          <span class="ql-formats" v-tooltip.bottom="'颜色'">
            <select class="ql-color"></select>
          </span>
          <span class="ql-formats" v-tooltip.bottom="'背景色'">
            <select class="ql-background" v-tooltip.bottom="'背景色'"></select>
          </span>
        </span>
        <span class="ql-formats">
          <button class="ql-list" value="ordered" type="button" v-tooltip.bottom="'有序列表'"></button>
          <button class="ql-list" value="bullet" type="button" v-tooltip.bottom="'无序列表'"></button>
          <select class="ql-align">
            <option defaultValue></option>
            <option value="center"></option>
            <option value="right"></option>
            <option value="justify"></option>
          </select>
        </span>
        <span class="ql-formats">
          <button class="ql-link" type="button" v-tooltip.bottom="'插入链接'"></button>
          <button type="button" @click="file.click()">
            <i class="far fa-image text-gray-600 -translate-y-0.5" />
          </button>
        </span>
        <span class="ql-formats">
          <button class="ql-clean" type="button" v-tooltip.bottom="'清除格式'"></button>
        </span>
      </template>
    </Editor>
    <input ref="file" type="file" accept="image/*" class="hidden" />
    <div class="flex justify-end py-4">
      <Button label="发布" @click="_publishArticle()" />
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'ArticleCreateArticle'
})
</script>

<script lang="ts" setup>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { getDictList } from '@/api/admin/dict'
import { uploadImage } from '@/api/user/image'
import { publishArticle } from '@/api/user/article'
import { useToast } from 'primevue/usetoast'
import { useRouter } from 'vue-router'

import CascadeSelect from 'primevue/cascadeselect'
import Dropdown from 'primevue/dropdown'
import InputText from 'primevue/inputtext'
import Editor from 'primevue/editor'
import Button from 'primevue/button'

let toast = useToast()
const router = useRouter()

const articleType = ref<Dict[]>([])
const commit = ref(false)
const daid = ref<number>()
const data = reactive({
  title: '',
  content: '',
  source: '原创',
  imgs: new Array<Image>()
})

const editor = ref()
const file = ref()
onMounted(() => {
  file.value.onchange = () => {
    if (file.value.files.length > 0) {
      insertImage(file.value.files[0])
    }
  }
})

function insertImage(img: File) {
  let formData = new FormData()
  formData.append('picture', img)

  uploadImage(formData, 119)
    .then(res => {
      data.imgs.push(res.data)
      editor.value.quill.insertEmbed(
        editor.value.quill.getSelection().index,
        'image',
        res.data.link
      )
    })
    .catch(err => {
      toast.add({
        severity: 'error',
        summary: '图片上传失败',
        detail: err.data.msg,
        life: 3000
      })
    })
}

function _publishArticle() {
  commit.value = true
  if (!daid.value) {
    toast.add({
      severity: 'error',
      summary: '请选择资讯分类',
      life: 3000
    })
    return
  }
  
  publishArticle(data, daid.value as number)
    .then(res => {
      toast.add({
        severity: 'success',
        summary: '发布成功',
        detail: '',
        life: 3000
      })
      commit.value = false
      setTimeout(() => {
        router.push(`/article/${res.data}`)
      }, 1000)
    })
    .catch(err => {
      toast.add({
        severity: 'error',
        summary: '发布失败',
        detail: err.data.msg,
        life: 3000
      })
    })
}

getDictList(6)
  .then(res => {
    articleType.value = res.data.list
  })
  .catch(err => {
    toast.add({
      severity: 'error',
      summary: '获取字典失败',
      detail: err.data.msg,
      life: 3000
    })
  })
</script>